<template>
 <div class="bg-grey pb-60 ">
    <!--面包屑开始-->
    <div class="archive-header pt-20 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">分类</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">分类</a>
              <span rel="nofollow">{{categoryName}}</span> 
          </div>
          <div class="bt-1 border-color-1 mt-30 mb-50"></div>
      </div>
    </div>
    <div class="container">
      <div class="loop-list loop-list-style-1">
                <div class="row">
                    <article class="col-md-4 mb-30 wow fadeInUp  animated" v-for="(item,index) in categorys" :key="item.id">
                        <div class="post-card-1 border-radius-10 hover-up">
                        <div class="post-thumb thumb-overlay img-hover-slide position-relative bg-image" :style="`background-image: url(${item.articleCover})`">
                            <router-link class="img-link" :to="`/article/${item.id}`"></router-link>
                        </div>
                            <div class="post-content p-30">
                                <div class="entry-meta meta-0 font-small mb-10">
                                    <router-link :to="{ name: 'tagDetails', params: { tagId: tag.id, tagName: tag.tagName } }" v-for="(tag,index) in item.tagVOList" :key="tag.id"><span class="post-cat text-info">{{tag.tagName}}</span></router-link>
                                </div>
                                <div class="d-flex post-card-content">
                                    <h5 class="post-title mb-20 font-weight-900">
                                        <router-link :to="`/article/${item.id}`">{{item.articleTitle}}</router-link>
                                    </h5>
                                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                        <span class="post-on">{{item.createTime}}</span>
                                        <span class="time-reading has-dot">{{item.category.categoryName}}</span>
                                        <span class="post-by has-dot">{{item.articleViews}}次浏览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
      </div>
    </div>
 </div>

</template>

<script>
export default {
  name:'tagDetail',
  data() {
    return {
      categoryId:0,
      categoryName:"",
    }
  },
  mounted() {
    const categoryId = this.$route.params.categoryId;
    const categoryName = this.$route.params.categoryName;
    this.categoryId = categoryId;
    this.categoryName = categoryName;
    this.getCategoryArticleList(categoryId);
  },
  data() {
    return {
      categorys:[],
      categoryName:"",
    }
  },
  methods:{
    async getCategoryArticleList(){
      const res = await this.$API.category.getCategoryArticleList(this.categoryId);
      if(res.code == 200)
      {
        this.categorys = res.data.articleConditionVOList;
      }
      else
      {
        this.$message({
          type:'error',
          message:'获取分类下的文章列表失败！'
        })
      }
    }
  }


}
</script>

<style>
 .post-thumb {
    overflow: hidden;
    position: relative;
  }

  .post-thumb img {
    transition: transform 0.3s ease;
  }

  .post-thumb:hover img {
    transform: scale(1.1); /* Adjust the scale factor as needed */
  }
</style>